<template>
    <div>
        <nav-bar></nav-bar>

        <div class="main " style="margin-top: 20px;">
            <el-row>
                <el-col :span="16" :offset="4">

                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>招聘信息</el-breadcrumb-item>
                    </el-breadcrumb>

                    <el-row>
                        <el-col :span="14" :offset="5">
                            <el-input placeholder="请输入职位名称" clearable @keyup.enter.native="handleSearch"
                                v-model="search.name" class="input-with-select">
                                <el-button style="background-color: #5a98d7; color: white;" slot="append"
                                    icon="el-icon-search" @click="handleSearch">
                                </el-button>
                            </el-input>
                        </el-col>
                    </el-row>

                    <div class="displayPos">
                        <el-row :gutter="10">
                            <template v-if="false">
                                暂无数据
                            </template>
                            <el-col :span="8" v-for="(item,index) in posList" :key="index" style="margin:5px 0">
                                <el-card class="box-card">

                                    <a @click="posDetail(item)">
                                        <div class="info1">
                                            <span class="title-text">{{item.name}} </span>
                                            <span class="salary"> {{item.salary}}</span>
                                        </div>
                                    </a>
                                    <div class="info2">
                                        <span> <span class="inquire">学历要求：</span> {{item.education}} </span>
                                    </div>

                                    <a @click="comDetail(item)">
                                        <div class="info3">

                                            <span class="companyName">{{item.companyName}} </span>
                                            <span class="vline"></span>
                                            <span class="user-text">{{item.type}} </span>
                                        </div>
                                    </a>

                                </el-card>


                            </el-col>

                        </el-row>
                        <div class="pageDiv">
                            <el-pagination background layout="total,prev, pager, next" :total="total" :page-size="size"
                                :current-page="currentPage" @current-change="handlePage">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <Footer style="position:absolute; bottom: 0;"></Footer>
        <el-drawer :title="drawer.title" :visible.sync="drawer.visible" :before-close="handleClose" size="40%">
            <template v-if="drawer.info.isPos">
                <div class="posSection">
                    <div class="posName">

                        <span class="name">
                            {{drawer.info.posInfo.name}}</span>
                        <span class="salary">
                            {{drawer.info.posInfo.salary}}</span>
                    </div>
                    <div class="education">

                        <span>
                            {{drawer.info.posInfo.education}}</span>

                    </div>
                    <div class="posOpt">
                        <el-button size="small" plain :icon="isIntrest" @click="handleFavor">感兴趣</el-button>
                        <el-button size="small" type="primary" plain @click="handleSend">投递</el-button>
                    </div>
                    <div class="posDes">
                        <span class="desTitle">职位描述：</span>
                        <div class="text">
                            <template v-if="drawer.info.posInfo.description!='' ">
                                <mavon-editor :value="drawer.info.posInfo.description" :toolbarsFlag="false"
                                    :subfield="false" :shortCut="false" :autofocus="false" :ishljs="true"
                                    :boxShadow="false" fontSize="16px" previewBackground="#FFFFFF"
                                    defaultOpen="preview" />

                            </template>
                            <template v-else>
                                <el-tag>null</el-tag>
                            </template>

                        </div>
                    </div>
                </div>
            </template>
            <template v-if="drawer.info.isCom">
                <div class="posSection">
                    <div class="posName">

                        <span class="name">
                            {{drawer.info.comInfo.name}}</span>
                        <span class="salary">
                            {{drawer.info.comInfo.salary}}</span>
                    </div>
                    <div class="education">

                        <span>公司规模： {{drawer.info.comInfo.size}}</span>
                        <span>公司类型 {{drawer.info.comInfo.type}}</span>
                    </div>
                    <div class="posOpt">

                    </div>
                    <div class="posDes">
                        <div class="info">
                            <el-row>
                                <el-col :span="12">
                                    <span>联系方式：
                                        <template v-if="drawer.info.comInfo.telephone!='' ">
                                            {{drawer.info.comInfo.telephone}}
                                        </template>
                                        <template v-else>
                                            <el-tag>null</el-tag>
                                        </template>

                                    </span>
                                </el-col>
                                <el-col :span="12"> <span>邮箱：
                                        <template v-if="drawer.info.comInfo.email!='' ">
                                            {{drawer.info.comInfo.email}}
                                        </template>
                                        <template v-else>
                                            <el-tag>null</el-tag>
                                        </template> </span></el-col>
                                <el-col :span="12"> <span>公司地址： <template v-if="drawer.info.comInfo.addr!='' ">
                                            {{drawer.info.comInfo.addr}}
                                        </template>
                                        <template v-else>
                                            <el-tag>null</el-tag>
                                        </template>
                                    </span></el-col>
                                <el-col :span="12"> <span>官网： <template v-if="drawer.info.comInfo.url!='' ">
                                            {{drawer.info.comInfo.url}}
                                        </template>
                                        <template v-else>
                                            <el-tag>null</el-tag>
                                        </template>
                                    </span></el-col>
                            </el-row>




                        </div>
                        <span class="desTitle">公司描述：</span>
                        <div class="text">
                            <template v-if="drawer.info.comInfo.description!='' ">
                                <mavon-editor :value="drawer.info.comInfo.description" :toolbarsFlag="false"
                                    :subfield="false" :shortCut="false" :autofocus="false" :ishljs="true"
                                    :boxShadow="false" fontSize="16px" previewBackground="#FFFFFF"
                                    defaultOpen="preview" />

                            </template>
                            <template v-else>
                                <el-tag>null</el-tag>
                            </template>

                        </div>
                    </div>
                </div>

            </template>
        </el-drawer>

    </div>
</template>



<script>
    import Vue from "vue";
    import {
        VueTypedJs
    } from "vue-typed-js";
    import "bootstrap/dist/css/bootstrap.css";
    import "bootstrap-vue/dist/bootstrap-vue.css";
    import Footer from './common/footer.vue'
    import navBar from "./common/navBar.vue"
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'

    import local from "@/store/local";

    // use
    Vue.use(mavonEditor);
    export default {
        name: "Index",
        components: {
            VueTypedJs,
            Footer,
            navBar,
        },
        data() {
            return {
                detailId: null,
                posList: [],
                total: 100,
                currentPage: 1,
                size: 6,
                search: {
                    name: "", //搜索关键字
                },
                selectPosId: null, //选择的职位id
                selectComId: null, //选择的公司id
                drawer: {
                    title: "",
                    visible: false,
                    info: {
                        isPos: false,
                        isCom: false,
                        posInfo: {}, //职位信息
                        comInfo: {} //公司信息
                    }

                },
                //投递参数
                sendParam: {
                    post_id: null,
                    company_id: null,

                },
                isIntrest: "el-icon-star-off", //是否感兴趣
            }
        },
        mounted() {
            this.getPosList()
        },
        methods: {
            handleFavor() {
                let param = JSON.parse(JSON.stringify(this.sendParam))
                console.log("感兴趣", this.sendParam);

                if (local.getToken()) {
                    if (local.getUserInfo().type == 2) {
                        this.postRequest("/favor/", {
                            ...param
                        }).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.message);
                            }
                        }).catch(error => {
                            // this.$message.error(res.message);
                            this.$message.error(error);

                        })
                    } else {
                        this.$message.error("非学生登录不能进行收藏");
                    }
                } else {
                    this.$message.error("请先登录");
                }
            },
            handleSend() {
                console.log("投递", this.sendParam);
                if (local.getToken()) {
                    if (local.getUserInfo().type == 2) {
                        this.postRequest("/send/", {
                            ...this.sendParam
                        }).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.message);
                            }
                        }).catch(error => {
                                // this.$message.error(res.message);
                                this.$message.error(error);

                            }

                        )
                    } else {
                        this.$message.error("非学生登录不能进行投递");
                    }
                } else {
                    this.$message.error("请先登录");
                }

            },
            handleSearch() {
                console.log("搜索");
                this.getPosList(this.search)
            },
            handleClose() {
                console.log("关闭drawer");
                this.drawer.visible = false
                this.drawer.info.isCom = false
                this.drawer.info.isPos = false
                this.sendParam = {
                    post_id: null,
                    company_id: null,
                }
            },
            handlePage(page) {
                this.currentPage = page
                console.log(page);
                this.getPosList()
            },
            getPosList(param) {
                this.postRequest("/front/post/query?currentPage=" + this.currentPage + "&size=" + this
                    .size, {
                        ...param
                    }).then(
                    res => {
                        if (res) {
                            this.posList = res.data
                            this.total = res.total
                        }
                    })
            },


            posDetail(item) {
                console.log("职位详情", item);
                this.sendParam = {
                    post_id: item.id,
                    company_id: item.companyId
                }
                console.log(this.sendParam, '投递参数');
                this.getRequest("/post/detail?id=" + item.id).then(res => {
                    if (res.code == 200) {
                        this.drawer.info.posInfo = res.obj
                        this.drawer.info.isPos = true
                        console.log(this.drawer.info.posInfo)
                    }
                })

                this.drawer.title = "职位详情"
                this.drawer.visible = true

            },
            comDetail(item) {
                console.log("公司详情", item);

                this.getRequest("/front/post/comDetail?id=" + item.companyId).then(res => {
                    if (res.code == 200) {
                        this.drawer.info.comInfo = res.obj
                        this.drawer.info.isCom = true
                        console.log(this.drawer.info.comInfo)

                    }
                })
                this.drawer.title = "公司详情"
                this.drawer.visible = true
            },
        },
    }
</script>
<style lang="scss" scoped>
    * {
        box-sizing: border-box;

    }


    a {
        text-decoration: none;
        color: #333;
    }


    ::v-deep(.el-card__body) {
        padding: 15px 20px !important;
    }

    .pageDiv {
        margin: 1vw 0;
        float: right;
    }

    .main {
        overflow: hidden;

        .displayPos {
            margin-top: 1.5vw;

            .vline {
                display: inline-block;
                width: 1px;
                height: 12px;
                vertical-align: middle;
                background: #e0e0e0;
                margin: 0 10px;
            }

            .info1 {
                height: 35px;
                line-height: 35px;
                font-size: 15px;
                color: #61687c;
                margin: 0 auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                position: relative;

                .title-text {
                    max-width: 174px;
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    vertical-align: middle;
                }

                .title-text:hover {
                    color: #5a98d7;
                    cursor: pointer
                }

                .salary {
                    color: #fc6c38;
                    position: absolute;
                    right: 20px;
                    top: 0;
                }
            }

            .info2 {
                font-size: 12px;
                color: #565d70;
                border-bottom: dashed 1px #e3e7ed;

                padding-right: 0;
                line-height: 28px;

                .inquire {
                    font-size: 11px;
                    color: #61687c;
                }
            }

            .info3 {
                line-height: 50px;
                height: 50px;
                font-size: 14px;

                padding-right: 0;

                .companyName:hover {
                    color: orange;
                    cursor: pointer
                }

                .user-text {
                    margin-left: 10px;
                    font-size: 12px;
                    color: #8d92a1;
                }
            }

        }


    }

    .posSection {
        font-size: 24px;
        line-height: 45px;
        padding: 8px 0;
        margin-left: 2vw;

        .posName {
            span {}

            .name {
                vertical-align: middle;
                line-height: 45px;
                max-width: 100px;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-right: 2vw;
            }

            .salary {

                display: inline-block;
                vertical-align: middle;
                color: #fa6a43;
                height: 42px;
                font-size: 18px;
                line-height: 42px;
                font-weight: 600;
            }
        }

        .education {
            color: rgba(66, 66, 66, 0.7);
            margin-bottom: 5px;
            line-height: 20px;
            font-size: 14px;
        }

        .posDes {
            font-size: 16px;

            .info {
                font-size: 14px;


            }

            .desTitle {
                line-height: 45px;
                font-weight: 700;
                margin-bottom: 0;
                padding: 0 10px 0 5px;
                border-left: 2px solid skyblue;

            }

            .text {
                word-break: break-all;
                word-wrap: break-word;
                color: #51586d;
                line-height: 36px;

            }

        }

        .posOpt {
            margin-bottom: 5px;
            font-size: 14px;
        }
    }
</style>